<style>
    .layui-badge-rim + .layui-badge-rim {
        margin-left: 5px;
    }
</style>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <form class="layui-form toolbar">
                <div class="layui-form-item">
                    <div class="layui-inline demoTable">
                        <!--<div class="inputs">
                            <input id="url" class="layui-input" type="text" placeholder="url"/>
                        </div>-->
                        <div class="inputs">
                            <input id="type" class="layui-input" type="text" placeholder="类型"/>
                        </div>
                        <div class="inputs">
                            <input id="key" class="layui-input" type="text" placeholder="键"/>
                        </div>
                        <div class="inputs">
                            <input id="value" class="layui-input" type="text" placeholder="值"/>
                        </div>

                            <button id="dictBtnSearch" type="button" class="layui-btn icon-btn"><i class="layui-icon">&#xe615;</i>搜索
                            </button>
                            <button id="clearBtn" type="reset" class="layui-btn icon-btn"><i
                                    class="layui-icon layui-icon-refresh-3"></i>重置
                            </button>
                            <button id="add" type="button" class="layui-btn icon-btn" data-type="add"><i
                                class="layui-icon layui-icon-add-circle" ></i>添加
                             </button>
                    </div>
                </div>
            </form>
            <table class="layui-table" id="dictTable" lay-filter="dictTable"></table>
        </div>
    </div>
</div>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script type="text/html" id="addDict">
   <div style="margin: 15px 10px">
       <form class="layui-form" id="dictForm" lay-filter="dictForm">
           <input type="hidden" name="id"/>
           <div class="layui-form-item">
               <label class="layui-form-label">字典类型</label>
               <div class="layui-input-inline">
                   <input class="layui-input" name="mType"/>
               </div>
           </div>
           <div class="layui-form-item">
               <label class="layui-form-label">键</label>
               <div class="layui-input-inline">
                   <input class="layui-input" name="mKey"/>
               </div>
           </div>
           <div class="layui-form-item">
               <label class="layui-form-label">值</label>
               <div class="layui-input-inline">
                   <input class="layui-input" name="mValue"/>
               </div>
           </div>
       </form>
   </div>
</script>

<script>
    layui.use(['layer', 'form', 'table', 'util', 'formSelects', 'admin', 'config', 'laydate'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        var util = layui.util;
        var formSelects = layui.formSelects;
        var admin = layui.admin;
        var config = layui.config;
        var laydate = layui.laydate;
        var mRoles = [];  // 全部角色
         laydate.render({
             elem: '#checkTime'
             , type: 'datetime'
        });
        // laydate.render({
        //     elem: '#endTime'
        //     , type: 'datetime'
        // });
        var tableOptions = table.render({
            elem: '#dictTable',
            url: config.base_server + 'dict',
            where: {
                access_token: config.getToken()
            },
            page: true,
            cellMinWidth: 60,
            cols: [[
                {field: 'id', title: '主键'},
                {field: 'mType', title: '类型'},
                {field: 'mKey', title: '键' },
                {field: 'mValue', title: '值'},
                {field: 'gmtCreate', title: '创建时间',templet:function (d) {
                        return layui.util.toDateString(d.gmtCreate);
                    }},
                {field: 'gmtModified', title: '修改时间',templet:function (d) {
                        return layui.util.toDateString(d.gmtModified);
                    }},
                {fixed: 'right',align: 'center', toolbar: '#barDemo', title: '操作'}
            ]]
        });

        // 搜索按钮点击事件
        $('#dictBtnSearch').click(function () {
            var type = $('#type').val();
            var key = $('#key').val();
            var value = $('#value').val();
            table.reload('dictTable', {
                where: {
                    mType: type,
                    mKey: key,
                    mValue: value,
                }
            });
        });

        var $ = layui.$, active = {
            add: function(){
                admin.open(
                    {
                        type: 1,
                        title: "添加字典信息",
                        maxmin: true,
                        area: ['360px', '290px'],
                        offset: '65px',
                        content: $("#addDict").html(),
                        btn:["保存","取消"],
                        yes: function(){
                            //获取表单数据
                            var data = $('#dictForm').serialize();
                            admin.req('dict',data,function (res) {
                                layer.msg(res.msg);
                                if(res.code == 200){
                                    layer.closeAll();
                                    tableOptions.reload();
                                }
                            },'POST');
                        },
                        btn2: function(){
                            layer.closeAll();
                        },
                        success: function(){
                            form.render();
                        }
                    }
                )
            }
        };
        $('.demoTable .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        //监听行工具事件
        table.on('tool(dictTable)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
                ,layEvent = obj.event; //获得 lay-event 对应的值
             if(layEvent === 'del'){
                 layer.confirm('确定删除此用户吗？', {
                     skin: 'layui-layer-admin'
                 }, function (i) {
                     layer.close(i);
                     layer.load(2);
                     admin.req('dict/' + data.id, {}, function (data) {
                         layer.closeAll('loading');
                         if (data.code == 200) {
                             layer.msg(data.msg, {icon: 1});
                             obj.del();
                         } else {
                             layer.msg(data.msg, {icon: 2});
                         }
                     }, 'DELETE');
                 });
            } else if(layEvent === 'edit'){
                 layer.msg("编辑");
                 admin.open(
                     {
                         type: 1,
                         title: "编辑字典信息",
                         maxmin: true,
                         area: ['360px', '290px'],
                         offset: '65px',
                         content: $("#addDict").html(),
                         btn:["更新","取消"],
                         yes: function(){
                             //获取表单数据
                             var data = $('#dictForm').serialize();
                             admin.req('dict/update',data,function (res) {
                                 layer.msg(res.msg);
                                 if(res.code == 200){
                                     layer.closeAll();
                                     tableOptions.reload();
                                 }
                             },'POST');
                         },
                         btn2: function(){
                             layer.closeAll();
                         },
                         success: function(){
                             form.val('dictForm',data);
                             form.render();
                         }
                     });


            }
        });


        // 获取所有角色
        layer.load(2);
        admin.req('role', {}, function (res) {
            layer.closeAll('loading');
            if (0 == res.code) {
                mRoles = res.data;
            } else {
                layer.msg('获取角色失败', {icon: 2});
            }
        }, 'GET');

    })
</script>